<!--
* description: 备件选择
* author:xuliwen
* createdDate:2021-2-3
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible="popupsVisible"
    width="70%"
    :append-to-body="true"
    :close-on-click-modal="false"
    @close="closeEdit"
  >
    <dialogHeader
      slot="title"
      :title="titleName"
      :style-type="$store.state.app.dialogType"
    />
    <!-- 显示按钮的onetabel -->
    <one-table-template
      ref="multipleTable"
      :dynamic-buttons="tableButtons"
      :dynamic-components="tableComponents"
      :dynamic-api-config="apiConfig"
      :dynamic-table-cols="tableCols"
      :dynamic-form-fields="formField"
      :dynamic-is-show-more-btn="false"
      :callback-obj="callbackObj"
    />
  </el-dialog>
</template>

<script>
import { oneTableWithViewTemplateMixins } from "@/components/mixins/oneTableWithViewTemplateMixins";
import dialogHeader from "@/components/dialogHeader";
import OneTableTemplate from "@/components/templates/oneTable";
import api from "@/api/se/apiBaseData";
export default {
  components: {
    dialogHeader,
    OneTableTemplate,
  },
  // 组件混入对象
  mixins: [oneTableWithViewTemplateMixins],
  props: {
    popupsVisible: {
      type: Boolean,
      default: false,
    },
    dataForForm: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path;
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode]);
    return {
      selectiondata: [],
      editPopupsVisible: false,
      titleName: "备件选择",
      // 标题
      textMap: {
        edit: "备件编辑",
        add: "备件新增",
      },
      // 网格查询API配置对象
      apiConfig: api.queryNoReturnAccessories,
      // 动态组件-按钮
      tableButtons: [
        {
          compKey: "btnKey1",
          type: "primary",
          size: "small",
          name: "search",
          clickEvent: () => this.queryTable(1),
          text: this.$t("sys.button.query") /* 保存*/,
          position: "right",
        },
        {
          compKey: "btnKey2",
          type: "",
          size: "small",
          icon: "iconfont  icon-cancel",
          clickEvent: () => this.choosePart(),
          text: "选择", // 取消
        },
        {
          compKey: "btnKey2",
          type: "",
          size: "small",
          name: "reset",
          clickEvent: () => this.reset(),
          text: this.$t("sys.button.reset"),
          position: "right", // 重置
        },
      ],
      // 动态组件-查询条件
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].formComponents
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].formComponents
          : [
              {
                compKey: "compKey1",
                labelName: "备件编码：",
                codeField: "partNo",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                span: 8,
                isMust: true,
              },
              {
                compKey: "compKey2",
                labelName: "备件名称：",
                codeField: "partName",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                span: 8,
                isMust: true,
              },
            ],
      // 动态生成网格列
      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
              {
                prop: "releaseId",
                label: "主键ID",
                hidden: true,
                alwaysHidden: true,
              },
              {
                prop: "updateControlId",
                label: "并发控制ID",
                hidden: true,
                alwaysHidden: true,
              },
              {
                prop: "bigAreaId",
                label: "大区ID",
                hidden: true,
                alwaysHidden: true,
              },
              {
                prop: "partNo",
                label: "备件编码",
              },
              {
                prop: "partName",
                label: "备件名称",
              },
            ],
      callbackObj: {
        onCheckSelectChange: (selection) => {
          this.selectiondata = selection;
        },
      },
      formField: {
        partNo: "",
        partName: "",
      },
    };
  },

  created() {
    this.$nextTick(() => {
      this.queryTable(1);
    });
  },
  // watch: {
  //   popupsVisible(newValue, oldValue){
  //     debugger
  //     if(newValue){
  //       debugger
  //       console.log(newValue)
  //        this.$nextTick(() => {this.queryTable(1)})
  //     }
  //   },
  // },
  methods: {
    // 关闭弹窗
    closeEdit(type) {
      this.$emit("close", type);
    },
    // 选择保存
    choosePart() {
      const that = this;
      const queryObj = {
        // 保存mutation
        type: "mutation",
        // api配置
        apiConfig: api.queryNoReturnInsert,
        // 条件/实体参数（变量），根据typeParam中的定义配置
        variables: that.selectiondata,
      };
      // 转换了中台请求格式数据
      var paramD = this.$getParams(queryObj);
      // 调用中台API方法（可复用）
      this.$requestAPI(paramD).then((response) => {
        if (response.result === "1") {
          this.$message({
            message: this.$t("sys.tips.esTip5") /* 保存成功*/,
            type: "success",
            duration: 1000,
          });
          this.popupsVisible = false;
          this.$nextTick(() => {
            this.$parent.queryTable(1);
          });
        } else {
          // 保存失败
          this.$message({
            message: "保存失败:" + response.msg,
            type: "warn",
            uration: 1000,
          });
        }
        // this.popupsVisible = false
      });
    },
    // queryform() {
    // var queryid = { orderId: this.dataForForm.saleOrderId }
    // // 先读取参数中的传输对象
    // const returnObj = {
    // // api配置
    //   apiConfig: orgApis.orderinvoicedetailsQuery,
    // 条件/实体参数（变量），根据typeParam中的定义配置
    // variables: queryid
    // }
    // 转换了中台请求格式数据
    // var paramD = this.$getParams(returnObj, null, this.dynamicApiStyle)
    // 调用中台API方法（可复用）
    // this.$requestAPI(paramD, this.dynamicApiStyle).then(response => {
    //   if (response.result === '0') {
    //     if (response.msg) {
    //       this.$message({
    //         message: response.msg,
    //         type: 'warn',
    //         uration: 2000
    //       })
    //     }
    //     return
    //   }
    //   // 返回json
    //   if (response.result === '1') {
    //     Object.assign(this.formField, response.rows[0], response.rows[1])
    //     console.log(this.formField)
    //   }
    // }).catch(err => {
    //   console.info(err)
    // })
    // }
  },
};
</script>
<style lang='scss' scoped>
/deep/ .el-dialog {
  margin-top: 5rem !important;
}
</style>
